<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="zh"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="zh"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="zh"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="zh"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="Speed730">
    <!-- Mobile Specific Metas
    ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href=/public/assets/new/img/logo.png>
    <title>{{baseConfig.pageTitle}}</title>
    <meta name="keywords" content="{{baseConfig.pageKeywords}}">
    <meta name="description" content="{{baseConfig.pageDescription}}">
    <!-- CSS
    ================================================== -->
    <link rel="stylesheet" href="/public/assets/red/css/reset.css" media="screen">
    <link rel="stylesheet" href="/public/assets/red/css/text.css" media="screen">
    <link href='/public/assets/red/css/font.css' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/public/assets/red/css/prettyPhoto.css" media="screen">
    <link rel="stylesheet" href="/public/assets/red/css/jquery.jqzoom.css" media="screen">
    <link rel="stylesheet" href="/public/assets/red/css/icons/icons.css" media="screen">
    <link rel="stylesheet" href="/public/assets/red/css/custom.css" media="screen">
    <link rel="stylesheet" href="/public/assets/red/css/responsive.css" media="screen">
    <link id="custom-style" rel="stylesheet" href="/public/assets/red/css/styles/red.css" media="screen">

    <link rel="stylesheet" href="/public/assets/fonts/iconfont/iconfont.css">
    <!-- JAVASCRIPT
    ================================================== -->
    <script src="/public/assets/red/js/jquery-1.7.1.min.js"></script>
    <script src="/public/assets/red/js/jquery.easing.1.3.js"></script>
    <script src="/public/assets/red/js/jquery-ui-1.10.3.min.js"></script>

    <!-- revolution slider JS files -->
    <script src="/public/assets/red/rs-plugin/js/jquery.themepunch.tools.min.js"></script>
    <script src="/public/assets/red/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

    <script src="/public/assets/red/js/jquery.flexslider.js"></script>
    <script src="/public/assets/red/js/idangerous.swiper-1.9.min.js"></script>
    <script src="/public/assets/red/js/jquery.sharrre-1.3.4.min.js"></script>
    <script src="/public/assets/red/js/kenburns.js"></script>
    <script src="/public/assets/red/js/twitter/jquery.tweet.js"></script>
    <script src="/public/assets/red/js/jquery.fitvids.min.js"></script>
    <script src="/public/assets/red/js/jquery.jqzoom-core-pack.js"></script>
    <script src="/public/assets/red/js/jquery.prettyPopin.js"></script>
    <script src="/public/assets/red/js/jquery.prettyPhoto.js"></script>
    <script src="/public/assets/red/js/jquery.cookies.js"></script>
    <script src="/public/assets/red/js/custom.js"></script>

    <!-- include alertify.css -->
    <link rel="stylesheet" href="/public/assets/common/alertify.0.3.11/alertify.core.css">
    <link rel="stylesheet" href="/public/assets/common/alertify.0.3.11/default.css">
    <style>
        .alertify-logs {
            top: 50px;
        }
    </style>
    <script src="/public/assets/common/alertify.0.3.11/alertify.min.js"></script>
    <!-- Common JS files -->
    <script src="/public/assets/common/inmyjs.kits.js"></script>
    <link rel="stylesheet" href="/public/assets/common/loading/shape.css">

    <!--[if lt IE 9]>
    <script src="/public/assets/red/js/html5.min.js"></script>
    <script src="/public/assets/red/js/ie9.min.js"></script>
    <link rel="stylesheet" href="/public/assets/red/css/font-awesome-ie7.min.css">
    <![endif]-->


    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?5058252e40e3f167fb58ffdaa04b7266";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>


    {% block title %}

    {% endblock %}
</head>
<body>
<div class='ap-loading loader-shade'>
</div>
<div class="ap-loading loader">
    <p id="ap_loading_title"></p>
</div>
<div id="wrapper">
    <div id="demo-panel">
        <span aria-hidden="true" data-icon="&#xe01c;" class="panle-toggle icomoon"></span>
        <h5>選擇一種顏色吧</h5>
        <div class="style-preview yellow-box" data-style="yellow"></div>
        <div class="style-preview red-box" data-style="red"></div>
        <div class="style-preview blue-box" data-style="blue"></div>
        <div class="style-preview rose-box" data-style="rose"></div>
        <div class="style-preview green-box" data-style="green"></div>
        <div class="style-preview brown-box" data-style="brown"></div>
        <div class="style-preview deep-blue-box" data-style="deep-blue"></div>
        <div class="style-preview orange-box" data-style="orange"></div>
        <h5>局部定製</h5>
        <p>選擇區域,更換背景</p>
        <select name="pattren-for" style="width: 150px;" id="pattren-for">
            <option value="body">整體</option>
            <option value="header">導航</option>
            <option value="#top-wrapper">頂部</option>
            <option value="#main-container">內容</option>
            <option value="footer">底部</option>
        </select>
        <div class="pattern-preview p1"></div>
        <div class="pattern-preview p2"></div>
        <div class="pattern-preview p3"></div>
        <div class="pattern-preview p4"></div>
        <div class="pattern-preview p5"></div>
        <div class="pattern-preview p6"></div>
        <div class="pattern-preview p7"></div>
        <div class="pattern-preview p8"></div>
        <div class="pattern-preview p9"></div>
        <div class="pattern-preview p10"></div>
        <div class="pattern-preview p11"></div>
        <div class="pattern-preview p12"></div>
        <div class="pattern-preview p13"></div>
        <div class="pattern-preview p14"></div>
        <div class="pattern-preview p15"></div>
        <div class="pattern-preview p16"></div>
        <div class="pattern-preview p17"></div>
        <div class="pattern-preview p18"></div>
        <div class="pattern-preview p19"></div>
        <div class="pattern-preview p20"></div>
        <div class="pattern-preview p21"></div>
        <div class="pattern-preview p22"></div>
        <div class="pattern-preview p23"></div>
        <div class="pattern-preview p24"></div>
        <div class="pattern-preview p25"></div>
        <div class="pattern-preview p26"></div>
        <div class="pattern-preview p27"></div>
        <div class="pattern-preview p28"></div>
        <div class="pattern-preview p29"></div>
        <div class="pattern-preview p30"></div>
        <div class="pattern-preview p31"></div>
        <div class="pattern-preview p32"></div>
    </div>
    <span aria-hidden="true" data-icon="&#xe010;" class="gotoTop icomoon"></span>
    {% block head %}
    <div class="top-nav">
        <!--<span aria-hidden="true" data-icon="&#xe001;" class="slide-toggle icomoon"></span>-->
        <div id="top-wrapper">
        <div class="container_12">
            <div class="top-select-buttons grid_2">
                <div id="language" class="top-icon">
                    <form action="#" method="get">
                        <div class="top-select-menu">
                            <div>
                                <a class="active_option" title="中文"><img width="18" height="12" src="/public/assets/red/images/icons/zh-flag.png" alt="chinese"/></a>
                            </div>
                            <i class="icomoon" aria-hidden="true" data-icon="&#xe00f;"></i>
                        </div>
                    </form>
                </div><!-- end #language -->
                <div  class="top-icon">
                   <!-- <form action="#" method="get">
                        <div class="top-select-menu">
                            <div>
                                <a class="active_option" title="人民幣">NTD$</a>
                            </div>
                            <i class="icomoon" aria-hidden="true" data-icon="&#xe00f;"></i>
                        </div>
                    </form>-->
                    <a style="color:#cacaca;" href="/">首頁</a>
                </div><!-- end #currency -->
            </div>
            <div class="grid_7 account-links">
                {% if uid %}
                <a href="/shop/uc"><i class="icomoon" aria-hidden="true" data-icon="&#x2191;"></i>歡迎您, {{nickname}}</a>
                <a href="javascript:void(0) " onclick="logout()"><i class="icomoon" aria-hidden="true" data-icon="&#x2617;"></i>退出</a>
                <a href="/shop/order"><i class="ico iconfont icon-dianpu" ></i>我的訂單</a>
                {% else %}
                <a href="/shop/login"><i class="icomoon" aria-hidden="true" data-icon="&#x2617;"></i>登錄</a>
                {% endif %}
            </div>
            {% if uid %}
            <div class="grid_3 mini-cart clearfix omega">
                <div class="click-trigger">
                    <span class="cart-top"><i class="cart-top-icon icomoon" aria-hidden="true" data-icon="&#x25e0;"></i>
                    </span>
                    <a class="checkout-icon right icomoon" onclick="checkout()" aria-hidden="true" data-icon="&#xe014;" href="javascript:void(0);"></a>
                    <div class="cart-data">購物車 (<span class="cart_num">{{cartCount}}</span>) 件</div>
                    <div class="cart-dropdown hidden_box">
                        <div id="cart-list">
                            {% for goods in cart %}
                            <div class="mini-product div_cart_{{goods.id}}">
                                <div class="product-meta">
                                    <a href="/shop/goods/{{goods.goodsID}}" target="_blank">
                                        <img width="55" height="50" src="{{goods.imgurl}}" alt="placeholder" />
                                        {{goods.name}}
                                        <span>{{goods.num}} x NTD${{goods.price}}</span>
                                    </a>
                                    <span class="price" data-price="{{goods.num*goods.price}}">NTD${{goods.num*goods.price}}</span>
                                </div>
                                <div class="action">
                                    <a href="javascript:void(0);" onclick="delCart('{{goods.id}}')" class="top-cart icomoon" aria-hidden="true" data-icon="&#xe004;"></a>
                                </div>
                            </div><!-- mini-product -->
                            {% endfor %}
                            <table class="mini-cart-total">
                                <tbody>
                                <tr>
                                    <td class="left"><span>小計: </span></td>
                                    <td class="right"><span class="cart_xj">NTD$0.00</span></td>
                                </tr>
                                <tr>
                                    <td class="left"><span>優惠: </span></td>
                                    <td class="right"><span>NTD$0.00</span></td>
                                </tr>
                                <tr>
                                    <td class="left"><span>總計: </span></td>
                                    <td class="right"><span class="total cart_total">NTD$0.00</span></td>
                                </tr>
                                </tbody>
                            </table>
                        </div><!-- end .cart-list -->
                        <div class="checkout clearfix">
                            <a class="cart left" href="/shop/cart"><i class="icomoon" aria-hidden="true" data-icon="&#x25e0;"></i>查看購物車</a>
                            <a class="check right"  onclick="checkout()" href="javascript:void(0);">去結算<i class="icomoon" aria-hidden="true" data-icon="&#xe014;"></i></a>
                        </div>
                    </div>
                </div><!-- end .mini-cart -->
            </div>
            {% endif %}
        </div><!-- end .container_12 -->
    </div><!-- end #top-wrapper -->
    </div>
    {% endblock %}
    {% block nav %}
    <header>
        <div class="container_12 header-inner relatived">
            <div id="logo" class="grid_3">
                <a href="/"><img src="{{baseConfig.logo}}" alt="logo" /></a>
            </div>
            <nav class="grid_8 right omega">
                <div class="mobile-menu-trigger"><span class="icomoon mobile-icon-menu" aria-hidden="true">&#xe008;</span><a class="menu-label">選擇一個頁面</a></div>
                <ul class="primary-nav">
                    <li><a {% if active_page=='1' %}class="active-page" {% endif %} href="/">首頁</a></li>
                    <li><a {% if active_page=='2' %}class="active-page" {% endif %} href="/shop/goods">產品</a></li>
                    <li><a {% if active_page=='3' %}class="active-page" {% endif %} href="/shop/blog">博客</a></li>
                    <li><a {% if active_page=='4' %}class="active-page" {% endif %} href="/shop/contact">聯繫我們</a></li>
                    <li class="search-wrapper">
                        <a href="#" aria-hidden="true" data-icon="&#x2610;" class="search-popup-trigger icomoon"></a>
                        <div id="top-search-wrapper">
                            <div class="relatived">
                                <form action="/shop/get">
                                    <input aria-hidden="true" type="submit" value="&#x2610;" id="search" class="search-button icomoon">
                                    <input type="text" name="search" placeholder="search..."/>
                                </form>
                            </div>
                        </div>
                    </li>
                </ul>
            </nav>
        </div><!-- container_12 -->
    </header>
    {% endblock %}
    {% block body %}

    {% endblock %}
    {% block foot %}
    <div class="base-info">
        <div class="container_12">
            <div class="info-block grid_3">
                <span class="icomoon" aria-hidden="true" data-icon="&#xe078;"></span>
                <div class="base-info-data">
                    <h4>注重安全</h4>
                    <span>信息安全防護</span>
                </div>
            </div>
            <div class="info-block grid_3">
                <span class="icomoon" aria-hidden="true" data-icon="&#x25df;"></span>
                <div class="base-info-data">
                    <h4>客戶至上 </h4>
                    <span>最大程度滿足客戶需求</span>
                </div>
            </div>
            <div class="info-block grid_3">
                <span class="icomoon" aria-hidden="true" data-icon="&#xe06a;"></span>
                <div class="base-info-data">
                    <h4>專業開發</h4>
                    <span>沒有做不到,只有想不到 </span>
                </div>
            </div>
            <div class="info-block grid_3 omega">
                <span class="icomoon" aria-hidden="true" data-icon="&#xe012;"></span>
                <div class="base-info-data">
                    <h4>高效快速</h4>
                    <span>扁平化管理,極速反應 </span>
                </div>
            </div>
        </div>
    </div><!-- end .base-info -->
    <footer>
        <span class="style-border"></span>
        <div class="container_12">
            <div class="grid_4 widget-box">
                <div class="box-heading">
                    <h4>關於我們</h4>
                </div>
                <ul class="list-links">
                    <li><a href="#">團隊介紹</a></li>
                    <li><a href="#">開發能力</a></li>
                </ul>
            </div>
            <div class="grid_4 widget-box">
                <div class="box-heading">
                    <h4>聯繫我們</h4>
                </div>
                <ul class="contact-info">
                    <li><i class="icomoon" aria-hidden="true" data-icon="&#x25df;"></i><span>{{shop.serviceCall}}</span></li>
                    <li><i class="icomoon" aria-hidden="true" data-icon="&#x21b4;"></i><span>{{shop.serviceEmail}}</span></li>
                    <li><i class="icomoon" aria-hidden="true" data-icon="&#xe007;"></i><span>{{shop.location+shop.completeAddress}}</span></li>
                </ul>
            </div>
            <div class="grid_4 widget-box omega">
                <div class="box-heading">
                    <h4>官方微信</h4>
                </div>
                <div class="contact-info">
                    <img style="width: 60%;" src="{{shop.wxImg}}"/>
                </div>
            </div>
            <div class="footer-base">
                <div class="grid_6 copyright">
                    <p>{{baseConfig.CopyRight}}<a href="http://www.miitbeian.gov.cn">備案號：{{baseConfig.ICPNO}}</a></p>
                </div>
                <div class="grid_6 payments omega">
                    <ul>
                        <li><a href="#"><img src="/public/assets/red/images/payments/american-express.png" alt="american-express"></a></li>
                        <li><a href="#"><img src="/public/assets/red/images/payments/amex.png" alt="amex"></a></li>
                    </ul>
                </div>
            </div><!--end .footer-base -->
        </div><!-- end .container_12 -->
    </footer>
    {% endblock %}
</div><!-- end #wrapper This wrapper cover all the website-->
<script>
    let cartCount="{{cartCount}}";
    function checkout() {
        if(cartCount<=0)
            Ap.msg.warning("購物車還是空的")
        else{
            window.location="/shop/checkout";
        }
    }
    function logout() {
        Ap.request.post("/shop/logout",{},function (res) {
            if(res.success){
                window.location="/";
            }
        })
    }
    function delCart(id) {
        Ap.request.del("/shop/cart/"+id,{},function (res) {
            if (res.success) {
                $(".div_cart_"+id).slideUp('fast',function(){
                    $(".div_cart_"+id).remove();
                    setAccount();
                    Ap.msg.success("已從購物車中刪除");
                });
            }else{
                Ap.msg.error("刪除失敗");
            }
        });
    }
    function delWishList(id) {
        Ap.request.del("/shop/wishlist/"+id,{},function (res) {
            if (res.success) {
                $(".div_wishlist_"+id).remove();
                Ap.msg.success("已刪除收藏");
            }else{
                Ap.msg.error("刪除失敗");
            }
        });
    }
    function addWishList(goodsID) {
        Ap.request.post("/shop/wishlist",{goodsID},function (res) {
            if (res.success) {
                Ap.msg.success("已收藏");
            }else{
                Ap.msg.error("收藏失敗");
            }
        });
    }
    function addCompare(goodsID) {
        Ap.msg.success("功能還在開發中，盡請期待！");
    }
    function addCart(goodsID,num,price) {
        Ap.request.post("/shop/cart",{goodsID,num,price},function (res) {
            if(res.success){
                Ap.msg.success("已加入購物車");
                let goods=res.result[0];
                let isNew=res.result[1];
                if(isNew) {
                    let dom = '<div class="mini-product div_cart_' + goods.id + '">\n' +
                        '<div class="product-meta">\n' +
                        '<a href="/shop/goods/' + goods.goodsID + '">\n' +
                        '<img width="55" height="50" src="' + goods.imgurl + '" alt="placeholder" />\n' +
                        '' + goods.name + '\n' +
                        '<span>' + goods.num + ' x NTD$' + goods.price + '</span>\n' +
                        '</a>\n' +
                        '<span class="price" data-price="' + goods.num * goods.price + '">NTD$' + goods.num * goods.price + '</span>\n' +
                        '</div>\n' +
                        '<div class="action">\n' +
                        '<a href="javascript:void(0);" onclick="delCart(\'' + goods.id + '\')" class="top-cart icomoon" aria-hidden="true" data-icon="&#xe004;"></a>\n' +
                        '</div>\n' +
                        '</div>';
                    $('#cart-list').prepend(dom);
                    setAccount();
                }
            }else{
                Ap.msg.error("加入購物車失敗");
            }
        });
    }
    function sum() {
        let account=new Number(0.00);
        let nums=0;
        $('#cart-list .price').each(function () {
            let price=new Number($(this).data('price'));
            account+=price;
            nums++;
        });
        return {nums,account:account.toFixed(2)};
    }
    function setAccount() {
        let {nums,account}=sum();
        $('.cart_xj').text('NTD$'+account);
        $('.cart_total').text('NTD$'+account);
        $('.cart_num').text(nums);
        cartCount=nums;
    }
    $(function() {
        setAccount();
    });
</script>
</body>
</html>
